import { defineComponent, ref, nextTick, watch, onMounted } from "vue";
import { BorderBox13 } from '@kjgl77/datav-vue3';
import UpIcon from "../svg/up.svg?component";
import { useSettingStoreHook } from "@/store/modules/settings";

import '@/style/collapse.scss'

const props = {
    /** 头部最左边的标题 */
    title: {
        type: String,
        default: ""
    },
    className: {
        type: String
    },
    iconSwitch: {
        type: Boolean,
        default: true
    },
    width: {
        type: String,
        default: 'atuo'
    },
    height: {
        type: String,
        default: 'atuo'
    },
    position: {
        type: Object,
        default: {}
    }
};

export default defineComponent({
    name: 'ReCollapse',
    props,
    setup(props, { emit, slots, attrs }) {
        const dvBox = ref()

        let isSwitch = ref(true)
        function isContract(val) {
            if (val === isSwitch.value) return false;
            isSwitch.value = val
            style.value.height = isSwitch.value ? `calc(${props.height} - 40px)` : `60px`

            setTimeout(() => {
                dvBox.value.initWH();
            }, 300);
        }

        onMounted(() => {
            if (props.iconSwitch)
                nextTick(() => {
                    isContract(false)
                })
        })

        const style = ref({
            width: props.width,
            height: `calc(${props.height} - 40px)`,
            ...props.position
        })

        return () => (
            <div class="box_bg">
                <BorderBox13 class={['ReCollapse', props.className]} style={style.value} ref={dvBox} >
                    {
                        !props.iconSwitch ? null :
                            <div class="title">
                                <p>{props.title}</p>
                                {
                                    props.iconSwitch ?
                                        <UpIcon class={isSwitch.value ? 'w-[16px] zIndex' : 'w-[16px] iconRotate zIndex'} onClick={() => isContract(!isSwitch.value)} />
                                        : null
                                }
                            </div>
                    }
                    <div class='collapseCn' >
                        {slots.default({
                            isContract
                        })}
                    </div>
                </BorderBox13 >
            </div>
        )
    }
})